<template>
	<!--<div :contenteditable="plaintext" @blur="blur1" v-content="value" class="editable" ref="input" :class="editable ? 'is-focus' : '' ">-->
	<!--</div>-->
	<div>
		<slot name="icon"></slot>
		<template v-if="!editable">
			<slot></slot>{{value || placeholder}}
		</template>
		<el-input
			v-if="editable"
			v-model="inputVal"
			size="mini"
			@blur="blur"
			ref="input"
			v-bind="$attrs"
			@click.native.stop
			:class="editable ? 'min-width': ''"
		></el-input>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator';
// eslint-disable-next-line no-restricted-imports
import { trim } from 'lodash';
@Component({
  components: {}
})
export default class extends Vue {
  @Prop({ default: '' }) private value!: string;
  @Prop({ default: '' }) private placeholder!: string;
  private editable = false;
  private inputVal = '';
  public initData (flag: any) {
    this.inputVal = this.value;
    this.editable = flag;
    if (flag) {
      this.$nextTick(() => {
        const input = this.$refs.input as any;
        input.focus();
      });
    }
  }

  private blur () {
    this.$emit('saveData', trim(this.inputVal));
  }
}
</script>

<style lang="stylus" scoped>
	.is-focus {
		border 1px solid #dcdfe6
		height 28px
		border-radius 4px
		padding 0px 15px
		line-height 28px
	}
	.editable {
		min-width 20px
		&.is-focus {
			border 1px solid #e0e0e0
			padding-left 10px
			padding-right 20px
		}
	}
	.min-width {
		min-width 120px
	}
</style>
